<template>
    <div class="pagination">
        <el-pagination
                class="pa"
                background
                layout="total, sizes, prev, pager, next"
                :total="total"
                :page-size="limit"
                :page-sizes="[1,2,3,4,5]"
                :current-page="page"
                :prev-text="prev"
                :next-text="next"
                :hide-on-single-page="false"
                @size-change="sizeChangeHandle"
                @current-change="pageChangeHandle">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "Pagination",
        props: {
            total: Number,
            page: Number,
            limit: Number
        },
        data(){
            return {
                prev: '上一页',
                next: '下一页'
            }
        },
        methods: {
            sizeChangeHandle(limit) {
                this.$emit('sizeChange', limit);
            },
            pageChangeHandle(page) {
                this.$emit('pageChange', page);
            }
        }
    }
</script>

<style scoped>
</style>
